var t = null;
t = setTimeout(time, 1000); //開始运行
function time() {
    clearTimeout(t); //清除定时器
    dt = new Date();
    var y = dt.getFullYear();
    var mt = dt.getMonth() + 1;
    var day = dt.getDate();
    var h = dt.getHours(); //获取时
    var m = dt.getMinutes(); //获取分
    var s = dt.getSeconds(); //获取秒
    document.querySelector(".showTime").innerHTML =
        "当前时间：" +
        y +
        "年" +
        mt +
        "月" +
        day +
        "-" +
        h +
        "时" +
        m +
        "分" +
        s +
        "秒";
    t = setTimeout(time, 1000); //设定定时器，循环运行
}

// 柱状图模块1
(function() {
    var myChart = echarts.init(document.querySelector(".bar .chart"));

    var option = {
        color: ['#2f89cf'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '0%',
            top: '10px',
            right: '0%',
            bottom: '4%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['旅游行业', '教育培训', '游戏行业', '医疗和行业', '电商行业', '社交行业', '金融行业'],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12"
            },
            axisLine: {
                show: false
            }
        }],
        yAxis: [{
            type: 'value',
            axisLabel: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12"
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    width: 2
                }
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                }
            }
        }],
        series: [{
            type: 'bar',
            barWidth: '35%',
            data: [200, 300, 300, 900, 1500, 1200, 600],
            itemStyle: {
                barBorderRadius: 5
            }
        }]
    };

    myChart.setOption(option);

    // 让图表的大小根据浏览器变化
    window.addEventListener('resize', function() {
        myChart.resize();
    });

})();

// 柱状图模块2
(function() {
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];

    myChart = echarts.init(document.querySelector('.bar2 .chart'));

    var option = {
        grid: {
            top: '10%',
            left: '10%',
            right: '4%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            show: false
        },
        yAxis: [{
            type: 'category',
            inverse: true,
            data: ['HTML5', 'CSS3', 'javascript', 'VUE', 'NODE'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: "#fff"
            }
        }, {
            inverse: true,
            data: ['702', '350', '610', '793', '664'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: "#fff"
            }
        }],
        series: [{
                name: '条',
                type: 'bar',
                data: [70, 34, 60, 78, 69],
                yAxisIndex: 0,
                itemStyle: {
                    barBorderRadius: 20,
                    color: function(params) {
                        // console.log(params);
                        return myColor[params.dataIndex];
                    }
                },
                barCategoryGap: 50,
                barWidth: 10,
                // 图形上的文本标签
                label: {
                    normal: {
                        show: true,
                        position: "inside",
                        formatter: "{c}%"
                    }
                }
            },
            {
                name: '框',
                type: 'bar',
                barCategoryGap: 50,
                barWidth: 15,
                yAxisIndex: 1,
                data: [100, 100, 100, 100, 100],
                itemStyle: {
                    barBorderRadius: 15,
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3
                }
            }
        ]
    };

    myChart.setOption(option);

    // 让图表的大小根据浏览器变化
    window.addEventListener('resize', function() {
        myChart.resize();
    });

})();


// 折线图1模块
(function() {
    var yearData = [{
            year: '2019',
            data: [
                [120, 132, 101, 134, 90, 230, 210, 191, 234, 290, 330, 310],
                [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230]
            ]
        },
        {
            year: '2020',
            data: [
                [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
                [120, 132, 101, 134, 90, 230, 210, 191, 234, 290, 330, 310]
            ]
        }
    ]

    var myChart = echarts.init(document.querySelector(".line .chart"));

    var option = {
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增游客', '新增粉丝'],
            textStyle: {
                color: '#4c9bfd'
            },
            right: '10%'

        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,
            borderColor: '#012f4a',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4c9bfd'
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4c9bfd'
            },
            axisLine: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a'
                }
            }
        },
        series: [{
                name: '新增游客',
                type: 'line',
                data: yearData[0].data[0],
                smooth: true
            },
            {
                name: '新增粉丝',
                type: 'line',
                data: yearData[0].data[1],
                smooth: true
            }
        ]
    };

    myChart.setOption(option);

    // 让图表的大小根据浏览器变化
    window.addEventListener('resize', function() {
        myChart.resize();
    });

    // 点击年份数据切换
    $(".line h2").on('click', 'a', function() {
        option.series[0].data = yearData[$(this).index()].data[0];
        option.series[1].data = yearData[$(this).index()].data[1];
        myChart.setOption(option);
    })

})();


// 折线图2模块
(function() {
    var myChart = echarts.init(document.querySelector(".line2 .chart"));

    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255,255,255,0.5)",
                fontSize: 12
            }
        },
        grid: {
            top: "30",
            left: '10',
            right: '10',
            bottom: '10',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "11",
                "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"
            ],
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,0.6)",
                    fontSize: 12
                }
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,0.2)"
                }
            }
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,0.1)"
                }
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,0.6)",
                    fontSize: 12
                }
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,0.1)"
                }
            }
        }],
        series: [{
                name: '邮件营销',
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: "#00d887",
                    width: 2
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, [{
                                    offset: 0,
                                    color: "rgba(0, 216, 135, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 216, 135, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                symbol: "circle",
                symbolSize: 5,
                itemStyle: {
                    color: "#00d887",
                    borderColor: "rgba(221, 220, 107, 0.1)",
                    borderWidth: 12
                },
                showSymbol: false,
                data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 60, 20, 40, 20, 40]
            },
            {
                name: '转发量',
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: "#0184d5",
                    width: 2
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, [{
                                    offset: 0,
                                    color: "rgba(0, 216, 135, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0, 216, 135, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                symbol: "circle",
                symbolSize: 5,
                itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221, 220, 107, 0.1)",
                    borderWidth: 8
                },
                showSymbol: false,
                data: [50, 30, 50, 60, 10, 50, 30, 50, 60, 40, 60, 40, 80, 30, 50, 60, 10, 50, 30, 70, 20, 50, 10, 40, 50, 30, 70, 20, 50, 10, 40]
            }
        ]
    };

    myChart.setOption(option);

    // 让图表的大小根据浏览器变化
    window.addEventListener('resize', function() {
        myChart.resize();
    });

})();


// 饼形图1模块
(function() {
    var myChart = echarts.init(document.querySelector(".pie .chart"));

    var option = {
        color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            bottom: '0%',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: 12
            }
        },
        series: [{
            name: '年龄分布',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            data: [{
                    value: 1,
                    name: '0岁以下'
                },
                {
                    value: 4,
                    name: '20-29岁'
                },
                {
                    value: 2,
                    name: '30-39岁'
                },
                {
                    value: 2,
                    name: '40-49岁'
                },
                {
                    value: 1,
                    name: '50岁以上'
                }
            ]
        }]
    };


    myChart.setOption(option);

    // 让图表的大小根据浏览器变化
    window.addEventListener('resize', function() {
        myChart.resize();
    });

})();


// 饼图2模块
(function() {
    var myChart = echarts.init(document.querySelector(".pie2 .chart"));

    var option = {
        color: ["#006cff", "#60dca0", "#ed8884", "#ff9f7f", "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff"],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            bottom: '0%',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: 12
            }
        },
        series: [{
            name: '地区分布',
            type: 'pie',
            radius: ['10%', '70%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
                fontSize: 10
            },
            labelLine: {
                length: 6,
                length2: 8
            },
            data: [{
                    value: 20,
                    name: '云南'
                },
                {
                    value: 26,
                    name: '北京'
                },
                {
                    value: 24,
                    name: '山东'
                },
                {
                    value: 25,
                    name: '河北'
                },
                {
                    value: 20,
                    name: '江苏'
                },
                {
                    value: 25,
                    name: '浙江'
                },
                {
                    value: 30,
                    name: '四川'
                },
                {
                    value: 42,
                    name: '湖北'
                }
            ]
        }]
    };


    myChart.setOption(option);

    // 让图表的大小根据浏览器变化
    window.addEventListener('resize', function() {
        myChart.resize();
    });
})();